<template>
  <van-field
    v-model="pickerValue[0]"
    is-link
    readonly
    :label="label"
    :placeholder="placeholder"
    @click="showPicker = true"
  />
  <van-popup v-model:show="showPicker" destroy-on-close round position="bottom">
    <van-picker
      :model-value="pickerValue"
      :columns="columns"
      @cancel="showPicker = false"
      @confirm="onConfirm"
    />
  </van-popup>
</template>
<script lang="ts" setup>
import { ref, watch } from 'vue'
import type { SelectProps } from '../types'

defineProps<SelectProps>()
const model = defineModel<string>()
const onConfirm = ({ selectedValues }: any) => {
  model.value = selectedValues[0]
  showPicker.value = false
  pickerValue.value = selectedValues
}
const showPicker = ref(false)
const pickerValue = ref<string[]>([])
watch(
  () => model.value,
  val => {
    if (val) {
      pickerValue.value = [val]
    } else {
      pickerValue.value = []
    }
  }
)
</script>
